<template>
	<!-- 底部导航 -->
	<view class="tabbars" :style="{ 'padding-bottom': paddingBottomHeight + 'rpx' }">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<image class="item-img" :src="item.iconPath" v-if="current == index"></image>
			<image class="item-img" :src="item.icon" v-else></image>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const props = defineProps({
	current: {
		type: String,
		default: '0'
	}
});

const paddingBottomHeight = 44;

const list = [
	{
		text: 'Home',
		icon: '/static/tabBar/home2.png', //未选中图标
		iconPath: '/static/tabBar/home1.png', //选中图片
		path: '/pages/home/home' //页面路径
	},
	{
		text: 'Shop',
		icon: '/static/tabBar/shop2.png',
		iconPath: '/static/tabBar/shop1.png',
		path: '/pages/shop/shop'
	},
	{
		text: 'Search',
		icon: '/static/tabBar/search2.png',
		iconPath: '/static/tabBar/search1.png',
		path: '/pages/search/search'
	},
	{
		text: 'User',
		icon: '/static/tabBar/user2.png',
		iconPath: '/static/tabBar/user1.png',
		path: '/pages/user/user'
	}
];

const tabbarChange = (path) => {
	uni.switchTab({
		url: path
	});
};
</script>

<style lang="scss" scoped>
.tabbarActive {
	color: #79d5ad !important;
}

.tabbars {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100vw;
	background-color: #0c0c0c;
	padding: 0 46rpx;
	box-sizing: border-box;
	z-index: 999;
}

.tabbar-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 98rpx;
	width: 134rpx;
}

.item-img {
	width: 100%;
	height: 100%;
	display: block;
}
</style>
